<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button class="btn">点击我</button>
    <script>
        // 普通事件重复绑定会发生覆盖，比如重复绑定onclick事件，以最后一次onclick事件为主
        // addEventListener(1事件名，2事件逻辑，3true捕获 flase冒泡 默认是false) 重复事件不会覆盖
        let btn = document.querySelector('.btn')
        btn.addEventListener('click', function () {
            console.log(this) //button
            console.log(1)
        }, true)
        btn.addEventListener('click', (e) => {
            console.log(this) //window
            console.log(2)
            console.log(e.stopPropagation)

        })
        
        function stopPropagation(e) {
            e = e || event
            e.stopPropagation ? e.stopPropagation() : e.cancalBubble = true

        }
        // 兼容ie
        // btn.attachEvent('onclick', function () {
        //     console.log(this)
        // })

        // function addEventListener(element, eventName, fn) {
        //     if (element.addEventListener) {
        //         return element.addEventListener(eventName, fn)
        //     }
        //     // 兼容ie
        //     element.attachEvent('on' + eventNamen, fn)
        // }
        // addEventListener(btn, 'click', function () {
        //     console.log('aaa')
        // })
        // 移除事件


    </script>
</body>

</html>